<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <father></father>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        let son = {
            template: '<div>son -- 父亲给了{{m}}<button @click="getMore">修改money</button></div>',
            // props: properties
            // 这样接受完成之后 相当于在data中定义了m属性
            // props: ['m'],
            props: {
                m: {
                    // 数据的类型
                    type: Number,
                    // 默认值
                    default: ()=> 300,
                    // 必须填写属性
                    required: true
                }
            },
            methods: {
                getMore() {
                    // 发布事件
                    this.$emit("more")
                }
            }
        }
        let father = {
            // 1. 使用自定义属性  父向子传值
            // 2. 使用自定义事件  子传父
            // 订阅
            template: '<div>Father<son @more="handlerMore" :m="money"></son></div>',
            // 在使用之前必须注册。
            components: {
                son
            },
            methods: {
                handlerMore() {
                    this.money += 100
                }
            },
            data() {
                return {
                    money: 100
                }
            }
        }

        const app = new Vue({
            el: "#app",
            components: {
                father
            }
        })
    </script>
</body>
</html>